<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户ID"
        style="width: 130px"
      />
      <el-input
        v-model="listQuery.nickname"
        clearable
        placeholder="用户昵称"
        style="width: 130px"
      />

      <el-select
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="性别"
        style="width: 100px"
      >
        <el-option
          v-for="option in genderOptions"
          :key="option.gender"
          :label="option.name"
          :value="option.gender"
        />
      </el-select>

      <el-select
        v-model="listQuery.identifyType"
        clearable
        filterable
        placeholder="认证类型"
        style="width: 100px"
      >
        <el-option
          v-for="option in authOptions"
          :key="option.type"
          :label="option.name"
          :value="option.type"
        />
      </el-select>
      <el-input
        v-model="listQuery.ipAddr"
        clearable
        placeholder="ip地址"
        style="width: 150px"
      />
      <el-input
        v-model="listQuery.phone"
        clearable
        placeholder="手机号"
        style="width: 150px"
      />
      <el-select
        v-model="listQuery.ABTest"
        clearable
        filterable
        placeholder="ab测试"
        style="width: 150px"
      >
        <el-option
          v-for="(test, i) in abTests"
          :key="i"
          :label="test"
          :value="test"
        />
      </el-select>
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width: 100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model.trim="listQuery.channelId"
        clearable
        filterable
        placeholder="渠道"
        style="width: 120px"
      >
        <el-option
          v-for="option in channelOptions"
          :key="option.channelName"
          :label="option.channelName"
          :value="option.channelName"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        style="width: 250px"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
      <el-button
        type="warning"
        @click="exportExcel('#WashAway-out-table', '用户列表')"
      >
        导出
      </el-button>
      <!-- <el-link type="primary" @click="advanceSearchVisible = true">
        高级搜索
      </el-link> -->
    </div>
    <!-- <el-dialog :visible.sync="advanceSearchVisible">
      <el-form label-width="100px">
        <el-form-item label="IP地址：">
          <el-input
            v-model="listQuery.ipAddr"
            clearable
            placeholder="ip地址"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
            v-model="listQuery.phone"
            clearable
            placeholder="手机号"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="ab测试：">
          <el-select
            v-model="listQuery.ABTest"
            clearable
            filterable
            placeholder="ab测试"
            style="width: 150px"
          >
            <el-option
              v-for="(test, i) in abTests"
              :key="i"
              :label="test"
              :value="test"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="国家：">
          <el-select
            v-model="listQuery.countryCode"
            clearable
            filterable
            placeholder="国家"
            style="width: 100px"
          >
            <el-option
              v-for="(value, key, index) in countryCodeItem"
              :key="index"
              :label="value"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道：">
          <el-select
            v-model.trim="listQuery.channelId"
            clearable
            filterable
            placeholder="渠道"
            style="width: 120px"
          >
            <el-option
              v-for="option in channelOptions"
              :key="option.channelName"
              :label="option.channelName"
              :value="option.channelName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="advanceSearchVisible = false">取消</el-button>
        <el-button type="primary" @click="onAdvanceSearch">确定</el-button>
      </span>
    </el-dialog> -->
    <div class="cs-filter-result">
      <AdvanceTable
        :loading="listLoading"
        :columns="columns"
        :list="list"
        fit
        :height="'calc(100vh - 270px)'"
      >
        <template slot="liveCertification" slot-scope="{ row }">
          {{
            certificate(row.liveCertification) +
              ' / ' +
              certificate(row.goddessCertification)
          }}
        </template>
        <template slot="mLevel" slot-scope="{ row }">
          {{ (row.mLevel || 0) + '/' + row.mCoins }}
        </template>
        <template slot="rLevel" slot-scope="{ row }">
          {{ row.rLevel + '/' + row.rDiamonds }}
        </template>
        <template slot="_action_" slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="onGoDetail(row.id)">
            详情
          </el-button>
          <el-button
            v-if="!row.banedStatus"
            type="danger"
            size="mini"
            @click="onForbid(row)"
          >
            封号
          </el-button>
        </template>
      </AdvanceTable>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>

    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'0'"
      @onSuccess="doSearch"
    />
  </div>
</template>

<script>
import AdvanceTable from '@/components/AdvanceTable'
import TablePagination from '@/components/TablePagination'
import DialogForbidAccount from './components/DialogForbidAccount'
import { xhrAccountList, xhrChannelList, xhrAbTests } from '@/api/account'
import { gender, filterVipType } from '@/filters'
import { getCountryItem } from '@/filters'
export default {
  name: 'AccountList',
  components: { AdvanceTable, TablePagination, DialogForbidAccount },
  filters: {},
  data() {
    return {
      advanceSearchVisible: false,
      list: null,
      total: 0,
      daterangeValue: '',
      abTests: [],
      listQuery: {
        pageNum: 1,
        pageSize: 100,
        channelId: null,
        startTime: null,
        endTime: null,
        masterId: null,
        gender: null,
        ABTest: null,
        identifyType: null,
        nickname: null,
        ipAddr: null,
        phone: null,
        userId: (this.$route.query && this.$route.query.id) || null,
        authType: null
      },
      listLoading: true,
      dialogVisible: false,
      forbidAccounts: '',
      channelOptions: [],
      genderOptions: [
        { gender: 1, name: '男' },
        { gender: 2, name: '女' },
        { gender: 0, name: '未知' }
      ],
      // ,
      // // TODO 认证类型
      authOptions: [
        { type: 1, name: '真人' },
        { type: 2, name: '主播' }
      ],
      columns: [
        {
          key: 'id',
          label: '用户ID',
          visible: true,
          width: 100
        },
        {
          key: 'nickname',
          label: '用户昵称',
          visible: true,
          width: 100
        },
        {
          key: 'familyId',
          label: '家族ID',
          visible: false,
          width: 100
        },
        {
          key: 'familyName',
          label: '家族名称',
          visible: false,
          width: 100
        },
        {
          key: 'gender',
          label: '性别',
          visible: true,
          filter: gender,
          width: 100
        },
        {
          key: 'vipType',
          label: 'VIP',
          visible: true,
          filter: filterVipType,
          width: 100
        },
        {
          key: 'createTime',
          label: '创建时间',
          visible: true,
          width: 100
        },
        {
          key: 'ipAddress',
          label: 'IP地址',
          visible: true,
          width: 100
        },
        {
          key: 'homePlace',
          label: '定位地址',
          visible: true,
          width: 100
        },
        {
          key: 'address',
          label: 'IP位置',
          visible: true,
          width: 100
        },
        {
          key: 'channelName',
          label: '渠道',
          visible: true,
          width: 100
        },
        {
          key: 'masterId',
          label: '师傅ID',
          visible: false,
          width: 100
        },
        {
          key: 'loginLastTime',
          label: '最后登录时间',
          visible: true,
          width: 120
        },
        {
          key: 'liveCertification',
          label: '真人/主播认证',
          visible: true,
          slot: true,
          width: 150
        },
        {
          key: 'mLevel',
          label: '魅力等级/魅力值',
          visible: true,
          slot: true,
          width: 150
        },
        {
          key: 'rLevel',
          label: '土豪等级/土豪值',
          visible: true,
          slot: true,
          width: 150
        },
        {
          key: 'diamonds',
          label: '钻石数量',
          visible: true,
          width: 100
        },
        {
          key: 'coins',
          label: '积分数量',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: 100
        },
        {
          key: 'chatCards',
          label: '视频卡',
          visible: true,
          width: 100
        },
        {
          key: 'chatVoiceCards',
          label: '语音卡',
          visible: true,
          width: 100
        },
        {
          key: 'chatTicketsNum',
          label: '私聊券',
          visible: true,
          width: 100
        },
        {
          key: 'divideCoins',
          label: '贡献分成',
          visible: true,
          width: 100
        },
        {
          key: 'withdrawalMoney',
          label: '提现总数',
          visible: true,
          filter: function(val) {
            return val / 10000
          },
          width: 100
        },
        {
          key: '_action_',
          label: '操作',
          slot: true,
          visible: true,
          fixed: 'right',
          width: '160px'
        }
      ],
      countryCodeItem: getCountryItem()
    }
  },
  created() {
    this.doSearch()
    xhrChannelList()
      .then(resp => {
        this.channelOptions = resp.data.list
      })
      .catch(err => {
        this.$message.error(err)
      })
    xhrAbTests()
      .then(resp => {
        for (const i in resp.data.list) {
          this.abTests.push(resp.data.list[i].abTest)
        }
      })
      .catch(err => {
        this.$message.error(err)
      })
  },
  methods: {
    onAdvanceSearch() {
      this.doSearch()
      this.advanceSearchVisible = false
    },
    doSearch() {
      if (this.listQuery.userId && !/^\d*$/.test(this.listQuery.userId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      const params = Object.assign({}, this.listQuery)
      xhrAccountList(params)
        .then(resp => {
          for (const k in params) {
            if (params[k] !== this.listQuery[k]) {
              console.log('params not match..')
              return
            }
          }
          this.list = resp.data.list
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    certificate(val) {
      if (!val) {
        return '未认证'
      }
      if (val === true) {
        return '认证通过'
      } else {
        return '未通过'
      }
    },
    onGoDetail(id) {
      this.$router.push('/account/account-detail?id=' + id)
    },
    onForbid(row) {
      this.forbidAccounts = row.id
      this.dialogVisible = true
    }
  }
}
</script>
